<script setup lang="ts">
withDefaults(defineProps<{title?:string,showMore?:string}>(),{title:()=>'标题',showMore:()=>''})

const emit = defineEmits<{
  //定义一个回调方法，可以理解为回调父组件传入的attribute为ccc的方法，入参为一个number类型的变量
  (e: 'ccc', num: string): void,
}>()

///左边的单击触发
function clickRightHandler(name:string){
  emit('ccc', name);
}

</script>
<template>
  <div class="body_style">
    <div style="display: flex;flex-direction: row;align-items: center;gap: 10px">
      <img src="../../assets/train_logo.png" width="21" height="32" >
      <div class="fontStyle">{{title}}</div>
    </div>
    <div v-if="showMore?.length!=0" style="cursor: pointer" @click="clickRightHandler(showMore)">
      {{showMore}}
    </div>
  </div>
</template>

<style scoped>
.fontStyle{
  font-weight: bold;
}
.body_style{
  display: flex;
  flex-direction: row;
  align-items: center;/*垂直居中对齐*/
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
</style>